{% extends 'base.html' %}

{% block title %}资产二维码 - {{ asset.name }}{% endblock %}

{% block extra_css %}
<style>
    .qr-code-container {
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        text-align: center;
        margin: 20px 0;
    }
    
    .qr-code-image {
        max-width: 300px;
        max-height: 300px;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }
    
    .asset-info-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px;
        padding: 25px;
        margin: 20px 0;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: 600;
        opacity: 0.9;
    }
    
    .info-value {
        font-weight: 500;
    }
    
    .action-buttons {
        margin-top: 20px;
    }
    
    .btn-custom {
        border-radius: 25px;
        padding: 10px 25px;
        font-weight: 500;
        margin: 5px;
        transition: all 0.3s ease;
    }
    
    .btn-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    @media print {
        .action-buttons, .navbar, .breadcrumb {
            display: none !important;
        }
        
        .qr-code-container {
            box-shadow: none;
            border: 1px solid #000;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'assets:asset_list' %}">资产管理</a></li>
            <li class="breadcrumb-item"><a href="{% url 'assets:asset_detail' asset.id %}">{{ asset.name }}</a></li>
            <li class="breadcrumb-item active">二维码</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-md-6">
            <!-- 二维码显示 -->
            <div class="qr-code-container">
                <h4 class="mb-4">
                    <i class="fas fa-qrcode text-primary me-2"></i>
                    资产二维码
                </h4>
                
                {% if asset.qr_code %}
                    <img src="{{ asset.qr_code.url }}" alt="资产二维码" class="qr-code-image img-fluid">
                    <p class="text-muted mt-3">
                        <small>扫描二维码可快速查看资产信息</small>
                    </p>
                {% else %}
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        该资产还没有生成二维码
                    </div>
                {% endif %}
                
                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <a href="{% url 'assets:asset_qr_code' asset.id %}" class="btn btn-primary btn-custom">
                        <i class="fas fa-sync-alt me-2"></i>重新生成
                    </a>
                    <button onclick="window.print()" class="btn btn-success btn-custom">
                        <i class="fas fa-print me-2"></i>打印二维码
                    </button>
                    <a href="{% url 'assets:asset_print_label' asset.id %}" class="btn btn-info btn-custom">
                        <i class="fas fa-tag me-2"></i>打印标签
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <!-- 资产信息卡片 -->
            <div class="asset-info-card">
                <h5 class="mb-4">
                    <i class="fas fa-info-circle me-2"></i>
                    资产信息
                </h5>
                
                <div class="info-item">
                    <span class="info-label">资产名称：</span>
                    <span class="info-value">{{ asset.name }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">资产编号：</span>
                    <span class="info-value">{{ asset.asset_number }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">资产类别：</span>
                    <span class="info-value">{{ asset.category.name|default:"未分类" }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">所属部门：</span>
                    <span class="info-value">{{ asset.department.name|default:"未分配" }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">使用人：</span>
                    <span class="info-value">{% if asset.user %}{{ asset.user.get_full_name|default:asset.user.username }}{% else %}未分配{% endif %}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">资产状态：</span>
                    <span class="info-value">
                        {% if asset.status == 'idle' %}
                            <span class="badge bg-secondary">闲置</span>
                        {% elif asset.status == 'in_use' %}
                            <span class="badge bg-success">在用</span>
                        {% elif asset.status == 'borrowed' %}
                            <span class="badge bg-warning">已借出</span>
                        {% elif asset.status == 'maintenance' %}
                            <span class="badge bg-info">维修中</span>
                        {% elif asset.status == 'scrapped' %}
                            <span class="badge bg-danger">已报废</span>
                        {% endif %}
                    </span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">采购价格：</span>
                    <span class="info-value">¥{{ asset.purchase_price|floatformat:2 }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">当前价值：</span>
                    <span class="info-value">¥{{ asset.current_value|floatformat:2 }}</span>
                </div>
            </div>
            
            <!-- 快捷操作 -->
            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-tools me-2"></i>快捷操作
                    </h6>
                    <div class="d-grid gap-2">
                        <a href="{% url 'assets:asset_detail' asset.id %}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-eye me-2"></i>查看详情
                        </a>
                        <a href="{% url 'assets:asset_update' asset.id %}" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-edit me-2"></i>编辑资产
                        </a>
                        <a href="{% url 'assets:asset_scan_qr' %}" class="btn btn-outline-info btn-sm">
                            <i class="fas fa-camera me-2"></i>扫描二维码
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 添加打印样式优化
    const style = document.createElement('style');
    style.textContent = `
        @media print {
            body * {
                visibility: hidden;
            }
            .qr-code-container, .qr-code-container * {
                visibility: visible;
            }
            .qr-code-container {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
        }
    `;
    document.head.appendChild(style);
});
</script>
{% endblock %}
